<template>
  <a-sub-menu :key="menuInfo.path">
    <template #title>
      <Icon v-if="menuInfo.meta?.icon" :icon="menuInfo.meta?.icon" :size="18" />
      <span  style="color: #fff;">{{ menuInfo.meta.title }}</span>
    </template>
    <template v-for="item in menuInfo.children" :key="item.path">
      <template v-if="!item.children || item.children.length === 0">
        <a-menu-item v-if="!item.meta?.hideMenu" :key="(menuInfo.path+'/'+item.path)" style="margin: 0">
          <Icon v-if="item.meta?.icon" :icon="item.meta?.icon" :size="18" />
          <span  style="color: #fff;">{{item.meta.title }}</span>
        </a-menu-item>
      </template>
      <template v-else>
        <sub-menu :menu-info="item" :key="item.path"/>
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
export default {
  name: 'cSubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  }
};

</script>

<script lang="ts" setup>
import {Icon} from "/@/components/Icon";
</script>
